
<template>
  <headerVue class="header"></headerVue>
  <transition name="leftSlide-fade"  >
    <leftVue v-if="store.state.show" appear="true" class="leftContent"></leftVue>
  </transition>
  <transition name="rightSlide-fade"  >
    <rightVue v-if="store.state.show" appear="true" class="rightContent"></rightVue>
  </transition>
  <bottomVue class="bottomContent"></bottomVue>
  <!-- <threeScene class="threeScene"></threeScene> -->
   <router-view></router-view>
</template>
<script setup>


import { store } from "./store/config.js";
import {  ref } from 'vue';

import headerVue from './components/header.vue';
import leftVue   from './components/left.vue';
import rightVue   from './components/right.vue';
import bottomVue from './components/bottom.vue';
import threeScene from "./components/threeScene.vue";

setTimeout(function(){
  store.commit("setShow",true)
},10)

</script>



<style>

*{
  margin:0px;
  padding: 0px;
}
html,body{
  overflow: hidden;
  width: 100%;
  height: 100%;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.header{
    width: 100%;
    height: 80px;
    position: absolute;
    z-index: 10;
}

.threeScene
{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}


.leftContent
{
  position: absolute;
  left: 0px;
  top: 50%;
  margin-top: 20px;
  transform: translateY(-50%);
  z-index: 10;
}
.rightContent{
  position: absolute;
  right: 0px;
  top: 50%;
  margin-top: 20px;
  transform: translateY(-50%);
  z-index: 10;
}

.bottomContent{
  width: 640px;
  height: 60px;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  z-index: 10;
}

.leftSlide-fade-enter-active, .leftSlide-fade-leave-active {
  transition: all .5s ease;
}

.leftSlide-fade-enter-from, .leftSlide-fade-leave-to {
  opacity: 0;
  transform: translateY(-50%) translateX(-300px);
}

.rightSlide-fade-enter-active, .rightSlide-fade-leave-active {
  transition: all .5s ease;
}

.rightSlide-fade-enter-from, .rightSlide-fade-leave-to {
  opacity: 0;
  transform: translateY(-50%) translateX(300px);
}
</style>
